<template>
  <div class="topic" :class="themeClass" :style="{minHeight: windowHeight}">
    <div class="xs-tabs">
      <van-tabs :border="false">
        <van-tab v-for="(value, id) in tabList" :title="value.name" :key="id">
          <div class="tabs-item">
            <scroll-view
                scroll-y
                :style="{height: scrollHeight}"
            >
              <van-row gutter="15">
                <van-col span="8" v-for="(value, index) in 12" :key="index">
                  <div class="card">
                    <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
                    <div class="card-box">
                      <div class="title van-ellipsis">xxxx</div>
                      <div class="info color-text-secondary van-ellipsis">ssssss</div>
                      <div class="rate">
                        <van-rate value="3" size="12" />
                      </div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </scroll-view>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  components: {},
  data () {
    return {
      tabList: [
        {
          id: 1,
          name: '美女'
        },
        {
          id: 2,
          name: '男人'
        },
        {
          id: 3,
          name: '老板'
        },
        {
          id: 4,
          name: '成员'
        }
      ]
    }
  },
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    },
    scrollHeight: function () {
      console.log(this.windowHeight)
      return `${parseInt(this.windowHeight) - 65}px`
    }
  },
  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
   */
  methods: {
  }
}
</script>

<style lang="scss">
  .topic {

  }
</style>
